import React,{useState} from 'react'
import { Grid } from 'react-vant'
import { Cell } from 'react-vant';
import { Friends, Contact, FriendsO, Card, CommentO, Records, Completed, Star, Invitation, AddSquare, Edit, DesktopO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'

const Index: React.FC = () => {
    const [yhj, setYhj] = useState(localStorage.getItem('yhj'))
    const navigate = useNavigate()
    const huanzhegl = () => {
        navigate('/huanzhegl')
    }
    const siren = () => {
        navigate('/siren')
    }
    const yuer = () => {
        navigate('/yuer')
    }
    const jiuzhen = () => {
        navigate('/jiuzhen')
    }
    const tiao = () => {
        navigate('/wodeys')
    }
    return (
        <div>
            <div className='button_one'>
                <div className='order'>
                    <div className='order_top'>
                        <a>我的医生</a>
                    </div>
                    <div className='order_bottom'>
                        <Grid columnNum="3" iconSize="20">
                            <Grid.Item icon={<FriendsO style={{ color: '#3f45ff' }}  />} text='我的医生' onClick={tiao} />
                            <Grid.Item icon={<Contact style={{ color: '#f0f' }} />} text='关注医生' />
                            <Grid.Item icon={<Friends style={{ color: '#00f' }} />} text='备选医生' />
                        </Grid>
                    </div>
                </div>
            </div>
            <div className='button_two'>
                <div className='order'>
                    <div className='order_top'>
                        <a>我的账号</a>
                    </div>
                    <div className='order_nen'>
                        <div className='order_box' onClick={yuer}>
                            <p>0.00元</p>
                            <p>余额</p>
                        </div>
                        <div className='order_box'>
                            <p>100个</p>
                            <p>健康豆</p>
                        </div>
                        <div className='order_box'>
                            <p>0张</p>
                            <p>公益补贴卷</p>
                        </div>
                        <div className='order_box' onClick={()=>navigate('/wzj')}>
                            <p>{yhj?yhj:0}张</p>
                            <p>问诊卷</p>
                        </div>
                    </div>
                </div>
            </div>
            <div className='button_san'>
                <div className='order'>
                    <div className='order_top'>
                        <a>爱心口袋</a>
                    </div>
                    <div className='order_nen'>
                        <div className='order_box1'>
                            <p>0张</p>
                            <p>免费图文问诊/咨询</p>
                        </div>
                        <div className='order_box1'>
                            <p>0张</p>
                            <p>免费电话问诊/咨询</p>
                        </div>
                        <div className='order_box1'>
                            <p>0张</p>
                            <p>加号机会</p>
                        </div>
                    </div>
                </div>
            </div>
            <div className='button_si'>
                <Cell style={{ width: '100%' }} title="我的就诊记录" isLink onClick={jiuzhen} />
            </div>
            <div className='button_wu'>
                <Cell style={{ width: '100%' }} title="私人医生专区" isLink onClick={siren} />
            </div>
            <div className='button_liu'>
                <div className='order'>
                    <div className='order_top'>
                        <a>我的医生</a>
                    </div>
                    <div className='order_bottom'>
                        <Grid columnNum="4" iconSize="14">
                            <Grid.Item icon={<Card style={{ color: '#3f45ff' }} />} text='患者管理' onClick={huanzhegl} />
                            <Grid.Item icon={<CommentO style={{ color: '#f0f' }} />} text='我的病例' />
                            <Grid.Item icon={<AddSquare style={{ color: '#00f' }} />} text='我的处方' />
                            <Grid.Item icon={<Friends style={{ color: '#f90' }} />} text='已预约药单' />
                        </Grid>
                        <Grid columnNum="4" iconSize="14">
                            <Grid.Item icon={<Invitation style={{ color: '#f00' }} />} text='康复任务' />
                            <Grid.Item icon={<DesktopO style={{ color: '#f0f' }} />} text='上线服务评价' />
                            <Grid.Item icon={<Star style={{ color: '#ff0' }} />} text='我的收藏' />
                            <Grid.Item icon={<Friends style={{ color: '#f0f' }} />} text='关注的科普号' />
                        </Grid>
                        <Grid columnNum="4" iconSize="14">
                            <Grid.Item icon={<Card style={{ color: '#3f45ff' }} />} text='我的暖心' />
                            <Grid.Item icon={<Contact style={{ color: '#0ff' }} />} text='发票管理' />
                            <Grid.Item icon={<Friends style={{ color: '#0f0' }} />} text='用药日记' />
                            <Grid.Item icon={<Edit style={{ color: 'orange' }} />} text='看病日记' />
                        </Grid>
                        <Grid columnNum="4" iconSize="14">
                            <Grid.Item icon={<Completed style={{ color: '#f0f' }} />} text='诊后评价' />
                            <Grid.Item icon={<Records style={{ color: '#0f0' }} />} text='填写的调查表' />
                            <Grid.Item icon={<Friends style={{ color: '#ff0' }} />} text='我是医生' />
                        </Grid>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Index
